{% extends 'IMTUserBundle::layout-profile.html.twig' %}

{% block main_title %}Profil - Gérer mes comptes{% endblock %}

{% block include_style %}
<!-- Contact List -->
<link rel="stylesheet" href="{{ asset('custom-plugins/contactlist/contactlist.css') }}" media="screen">
{% endblock %}

{% block profil_ariane %}
<li>
	<i class="icon-home"></i><a href="{{ path('fos_user_profile_show') }}">Profil</a>
	<span class="divider">&raquo;</span>
</li>
<li>
	Contacts
</li>
{% endblock %}

{% block profil_header %}
<div class="profile-head clearfix">
	<div class="profile-info pull-left">
		<h1 class="profile-username">Gérer mes contacts</h1>
	</div>
	
	<div class="btn-toolbar pull-right">
		<div class="btn-group">
			<a class="btn btn-success" href="{{ path('imt_user_contact_new') }}"><i class="icon-plus"></i> Ajouter un contact</a>
	    </div>
	</div>
</div>
{% endblock %}

{% block profil_menu %}
{% include 'IMTUserBundle::menu-profile.html.twig' with {'profile_menu_selected' : 'contacts'} %}
{% endblock %}

{% block profil_content %}
<div class="profile-content">
	<div class="row-fluid">
		<div class="span12 widget">
		    <div class="widget-header light">
				<span class="title">Liste des contacts</span>
			</div>
			<div class="widget-content no-padding">
	            <ul id="contacts">
	            {% for name, index in entities %}
	            	<li data-group="{{ name }}">
				        <a class="title">{{ index.title }}</a>
			    	{% if index.values|length > 0 %}
				        <ul>
		    			{% for contact in index.values %}
					        <li>
						        <a href="{{ path('imt_user_contact_show', { 'id': contact.id }) }}">
					            	{{ contact }}
					            	<span style="font-size: 11px; display: block;" class="muted">{{ contact.accounts|join(', ') }}</span>
					            </a>
					        </li>
				        {% endfor %}
				        </ul>
				    {% endif %}
				    </li>
				{% endfor %}
				</ul>
			</div>
	    </div>    
	</div>
</div>
{% endblock %}

{% block include_script %}
<!-- Contact List -->
<script src="{{ asset('custom-plugins/contactlist/contactlist.min.js') }}"></script>
<script type="text/javascript">
$(document).ready(function(){
	$( '#contacts' ).contactList({
		filterPlaceholder: 'Rechercher ...', 
	});	
});
</script>
{% endblock %}
